<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学生信息管理</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <table border="1">
            <tr v-for="(stu, i) in stus" :key="i">
                <td>{{ stu.id }}</td>
                <td>{{ stu.name }}</td>
                <td>{{ stu.age }}</td>
                <td>
                    <button type="button" @click="del(i)">删除</button>
                </td>
            </tr>
        </table>
        <br />
        id: <input type="text" v-model="id"><br />
        name: <input type="text" v-model="name"><br />
        age: <input type="text" v-model="age"><br />
        <button @click="add">添加</button>
    </div>
    
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    id: '',
                    name: '',
                    age: '',                        
                    stus: [
                        { id: 1, name: "张三", age: 18 },
                        { id: 2, name: "李四", age: 18 }
                    ]
                };
            },
            methods: {
                add() {
                    console.log(this.id + "," + this.name + "," + this.age);
                    const stu = {
                        id: parseInt(this.id),
                        name: this.name,
                        age: parseInt(this.age)
                    };
                    this.stus.push(stu);
                },
                del(i) {
                    this.stus.splice(i, 1);
                }
            }
        });
        const vm = app.mount("#app");
    </script>
</body>
</html>